import React from 'react';
import { DollarSign, Shield, Zap } from 'lucide-react';

const Advantages = () => {
  const advantages = [
    {
      icon: <DollarSign size={32} />,
      title: "降低数字化成本",
      description: "通过智能数字分析、专业的运维工具与云运维专家，能够有效降低资源和运维成本。",
      color: "green"
    },
    {
      icon: <Shield size={32} />,
      title: "提升数字化可靠性",
      description: "帮助企业减少运维故障和风险，提高技术保障能力，满足信息安全合规的要求。",
      color: "blue"
    },
    {
      icon: <Zap size={32} />,
      title: "随需应变的云工程技能",
      description: "全栈能力覆盖云平台、安全、数据、应用开发、微服务、容器、DevOps等领域。",
      color: "purple"
    }
  ];

  return (
    <section className="advantages">
      <div className="container">
        <h2>选择我们，助力企业数字化转型之旅</h2>
        
        <div className="advantage-list">
          {advantages.map((advantage, index) => (
            <div 
              key={index} 
              className={`advantage-item advantage-item-${advantage.color} hover-lift`}
            >
              <div className="advantage-icon">
                {advantage.icon}
              </div>
              <h3>{advantage.title}</h3>
              <p>{advantage.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Advantages;
